If you use a computer, you know about files. Every time you create a word processing document, you put it in a file and store it on your disk. Here's a picture of a word processing document. If you were to peek inside that document and see the way it actually looks inside the computer, you'd find something like this:
Building
Your
Own Website
I hope this guide is helpful Share
it with all your friends!
As you can see, the word processor stores lots of other fascinating tidbits in the file besides what you put in there. It uses that to tell itself how you want your document displayed -- what font and size to use (see where it says "Palatino"?), whether to center the text, and all the other formatting you can do. Let's call that stuff Gunk. The word processor puts that gunk there when you type in your document and knows what to do with it when you open it up the next time. So every word processing document you create has two things:
Your words (and pictures)
Gunk
Web Gunk
There's a similar kind of GUNK that web browsers use to display web pages. The difference is, with web pages you can write your own gunk.
HTML - Hyper Text Markup Language is the language you use to write your own web gunk.
Text Editor
Since we're writing our own gunk, we can't use a word processor. Word processors add gunk of their own and the only gunk we want in this file is the gunk we put there ourselves. So we need to use a type of program called a text editor. Text editors put absolutely no gunk into the files they create. The only thing that ends up in the file is what you put there yourself. That's what we want. On the Mac, a great freeware text editor is BBEdit Lite, available from Bare Bones Software (http://www.barebones.com). Or you can use SimpleText/Text Edit which already comes with every Mac. In Windows, you can use NotePad. In these examples, we'll use SimpleText, but the idea is exactly the same. So fire up your text editor and let's write some HTML.
Files
Every web page gets its own file.
The file name should end with .html (.htm in Windows) and be called something descriptive, like:
index.html
Now just follow the steps.
1The Text Editor
Launch the text editor by double-clicking on its icon. The SimpleText/Text Edit looks like this: You may launch NotePad in Windows from the Start button: click the Windows Start Button, select Programs, select Accessories, and then select NotePad. On your Mac, open the Text Edit, and click on Preferences. Choose the options listed below in the Open and Save tab before moving on to the next step.
Go to the File menu and select New. You get a blank page. This is where we're going to put our HTML. Type this:
<HTML>
Then hit Return a few times and type this:
</HTML>
Our first bit of gunk! This marks the beginning and end of the file, which should now look like this. The gunk tells your browser that it is looking at an HTML file.
<HTML> </HTML>
There are two other bits of gunk we need to add to get our file ready. We need to define the beginning and end of the file header, and the beginning and end of the body of the file:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Notice anything? Yup, you can tell GUNK in a file by these things < >, and notice that they usually come in pairs, one marking the beginning and one marking the end of whatever it is: < ></ >
2Content
So far all we have is gunk; let's put in some content. Let's make a web page that says, "I am an HTML Author." The words and pictures in an HTML file go in the Body of the file, so let's put our words there.
<HTML> <HEAD> </HEAD> <BODY> I am an HTML Author. </BODY> </HTML>
NOTE: Your file actually looks something like the one below. However, to help you keep your content separate from your gunk, in the guide we'll use examples like the one above where the html is blue and the content is black.
3Save the File
Save the file, just like you would save a word processing file, by selecting Save from the File menu and typing in the name of the file. Let's call this one test.html. Just remember the location of the folder in which you save it! Now you can launch your browser and look at your file, just as if it were a real web page, which it is!
4Launch the Browser
You can use your browser to look at files on your disk as well as pages on the Web. In Netscape or Explorer, select Open Page or Open File from the File menu, locate the folder where you saved test.html, and open it. (NOTE: If your browser connects you to the Internet and goes to the same web site every time you launch, you can make it stop. In Netscape, select Preferences from the Edit menu, click on Navigator in the category list, select Blank Page, and click on OK. In Explorer, select Preferences from the Edit menu, click on Home/Search in the list under Web Browser, click on the "Use None" button, and click on OK.) Here's what it looks like when you open the file you just created: Congratulations! You've just written your first web page. Now let's move on to Words.
Here's a picture of a word processing document. If you were to peek inside that document and see the way it actually looks inside the computer, you'd find something like this:
Your
Own Website
I hope this guide is helpful Share
it with all your friends!
As you can see, the word processor stores lots of other fascinating tidbits in the file besides what you put in there. It uses that to tell itself how you want your document displayed -- what font and size to use (see where it says "Palatino"?), whether to center the text, and all the other formatting you can do.
Let's call that stuff Gunk.
The word processor puts that gunk there when you type in your document and knows what to do with it when you open it up the next time. So every word processing document you create has two things:
Web Gunk
There's a similar kind of GUNK that web browsers use to display web pages. The difference is, with web pages you can write your own gunk.
HTML - Hyper Text Markup Language is the language you use to write your own web gunk.Text Editor
Since we're writing our own gunk, we can't use a word processor. Word processors add gunk of their own and the only gunk we want in this file is the gunk we put there ourselves. So we need to use a type of program called a text editor.Text editors put absolutely no gunk into the files they create. The only thing that ends up in the file is what you put there yourself. That's what we want.
On the Mac, a great freeware text editor is BBEdit Lite, available from Bare Bones Software (http://www.barebones.com). Or you can use SimpleText/Text Edit which already comes with every Mac.
In Windows, you can use NotePad. In these examples, we'll use SimpleText, but the idea is exactly the same.
So fire up your text editor and let's write some HTML.
Files
Every web page gets its own file.
The file name should end with .html (.htm in Windows) and be called something descriptive, like:- index.html
Now just follow the steps.The SimpleText/Text Edit looks like this:
You may launch NotePad in Windows from the Start button: click the Windows Start Button, select Programs, select Accessories, and then select NotePad.
On your Mac, open the Text Edit, and click on Preferences. Choose the options listed below in the Open and Save tab before moving on to the next step.
Go to the File menu and select New. You get a blank page. This is where we're going to put our HTML.
Type this:
- <HTML>
Then hit Return a few times and type this:- </HTML>
Our first bit of gunk!This marks the beginning and end of the file, which should now look like this. The gunk tells your browser that it is looking at an HTML file.
</HTML>
There are two other bits of gunk we need to add to get our file ready. We need to define the beginning and end of the file header, and the beginning and end of the body of the file:
<HEAD> </HEAD>
<BODY> </BODY>
</HTML>
< ></ >
The words and pictures in an HTML file go in the Body of the file, so let's put our words there.
<HEAD> </HEAD>
<BODY>
I am an HTML Author.
</BODY>
</HTML>
Just remember the location of the folder in which you save it!
Now you can launch your browser and look at your file, just as if it were a real web page, which it is!
(NOTE: If your browser connects you to the Internet and goes to the same web site every time you launch, you can make it stop. In Netscape, select Preferences from the Edit menu, click on Navigator in the category list, select Blank Page, and click on OK. In Explorer, select Preferences from the Edit menu, click on Home/Search in the list under Web Browser, click on the "Use None" button, and click on OK.)
Here's what it looks like when you open the file you just created:
Congratulations! You've just written your first web page.
Now let's move on to Words.